<template>
	<view class="content">
		<view class="data">
			<image class="bg"
				src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/qudaoguanli/jiaruwomen_icon1.png" mode="">
			</image>
			<view class="hide"></view>
			<view class="title flex-between pore">
				<view class="flex">
					<view class="lineText"></view>我的佣金
				</view>
				<text class="rightTitle" @click="goDetail">查看余额</text>
			</view>
			<!-- 数据统计 -->
			<view class="dataBox">
				<view class="item flex-between">
					<view class="text">
						<image src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon8.png"
							mode=""></image>
						可提现佣金：<text class="price">{{commission || 0}}</text>元
					</view>
				</view>
				<view class="topMoney">
					<p class="money" @click="goMyBalance">{{promotionInfo.nowMoney|| 0}}</p>
					<p class="money" @click="goProfit">{{promotionInfo.cumulativeIncome|| 0}}</p>
					<p class="money" @click="goMyTeam">{{promotionInfo.totalAmount || 0}}</p>
					<p class="moneyTitle">账户余额(元)</p>
					<p class="moneyTitle">累计收益(元)</p>
					<p class="moneyTitle">累计提现(元）</p>
				</view>
			</view>
			<view class="flex-between">
				<button class="btnA" @click="goIthdrawal">佣金提现</button>
				<button class="btnB" @click="goBalance">转入余额</button>
			</view>
		</view>
		<!-- 我的推广 -->
		<view class="promote">
			<view class="title flex">
				<view class="lineText"></view>佣金明细
			</view>
			<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
			@onSelected='onSelected' ></ren-dropdown-filter>
			<view class="item" v-for="(item,index) in recordList" :key="index" v-if="recordList.length>0">
				<view class="contain">
					<view class="left flex">
						<image class="userAvatar2" :src="markMap[item.mark].icon" mode=""></image>
						<view style="flex: 1;">
							<view class="flex-between" style="margin-top: -10rpx;">
								<text class=" bName">{{markMap[item.mark].name}}</text>
								<text class="vip" :class="item.addCut == 1?'addColor':'desColor'" >{{item.addCut == 1?'+'+item.money:'-'+item.money}}</text>
							</view>
							<view class="phoneBox">创建时间:{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="recordList.length == 0">
				<emptyPage title='暂无佣金明细~'></emptyPage>
			</view>
			
		</view>

		<!-- <home></home> -->
	</view>
</template>
<script>
	import {
		getCommissionList,
		getInfo
	} from '@/api/xing.js';
	import {
		getUserInfo,
		getIncomeStatistics
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage.vue';
	import home from '@/components/home';
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	export default {
		components: {
			emptyPage,
			home,
			RenDropdownFilter
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					'-1': '未通过',
					'0': '审核中',
					'1': '已提现'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				page: 1,
				limit: 10,
				beginDate: '',
				endDate: '',
				recordList: [],
				// recordType: 4,
				commission: "",
				markMap:{
					'1': {name:'审核通过已提现',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yongjin_icon6.png'},
					'2': {name:'未审核',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yongjin_icon1.png'},
					'3': {name:'未通过',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yongjin_icon2.png'},
					'4': {name:'自动通过审核已提现',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yongjin_icon6.png'},
				},
				datetimerange: ['', ''], // 初始值为空数组
				userInfo:{},
				promotionInfo:{},
				filterData:[
				    [{ text: '默认排序', value: '' }, { text: '审核通过已提现', value: 1 }, { text: '未审核', value: 2 }, { text: '未通过', value: 3 }, { text: '自动通过审核已提现', value: 4 }]
				],
				defaultIndex:[0],
				mark:'',
				
			};
		},
		computed: mapGetters(['isLogin']),
		mounted() {
			this.getRecordList();
			this.getUserList()
		},
		methods: {
			//获取用户信息
			getUserList() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					getIncomeStatistics(this.userInfo.uid).then(res => {
						this.promotionInfo = res.data
					})
					getInfo().then(res => {
						this.commission = res.data.commission
						this.promotionInfo.nowMoney = res.data.nowMoney
					})
					
				})
			},
			handleConfirm(e) {
				this.page = 1,
					this.limit = 10,
					this.recordList = [],
					this.getRecordList()
				console.log('选择的日期范围:', this.beginDate, this.endDate);
			},
			openPicker() {
				// 触发日期选择器的显示
				this.$refs.datetimePicker.show();
			},
			getRecordList() {
				let that = this;
				getCommissionList({
					pageNum: that.page,
					pageSize: that.limit,
					mark:this.mark
				}).then(res => {
					if (res.rows && res.rows.length > 0) {
						this.recordList = [...this.recordList, ...res.rows];
						this.page++;
					}
					console.log(this.recordList)
				});
			},
			// 跳转到佣金提现
			goIthdrawal() {
				uni.navigateTo({
					url: "/pages/users/user_ithdrawal_money/index"
				})
			},
			// 跳转到余额管理
			goDetail() {
				uni.navigateTo({
					url: "/pages/users/user_money/index"
				})
			},
			// 跳转到余额转入
			goBalance(){
				uni.navigateTo({
					url:"/pages/users/balanceGive/index?active="+1
				})
			},
			onSelected(res){
				this.recordList = []
				this.page = 1
				this.mark = res[0][0].value
				this.getRecordList();
			},
		},
		onReachBottom() {
			this.getRecordList();
		}
	}
</script>
<style scoped lang="scss">
	.data {
		position: relative;
		width: 686rpx;
		margin: 0 0 60rpx 32rpx;
		padding: 14rpx 24rpx 24rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 686rpx;
			height: 442rpx;
		}

		.hide {
			padding: 12rpx 24rpx 0 0;
			position: absolute;
			right: 0rpx;
			top: 10rpx;
			width: 324rpx;
			height: 64px;
			background: #D7EEFF;
			border-radius: 12rpx;
			font-size: 24rpx;
			color: #637697;
			z-index: -1;
			text-align: right;
		}

		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			margin-bottom: 26rpx;
			font-family: "Alibaba PuHuiTi 2.0-85 Bold";

			.rightTitle {
				font-weight: 400;
				font-size: 24rpx;
				color: #637697;
			}
		}

		.lineText {
			width: 8rpx;
			height: 34rpx;
			background: #2393FF;
			border-radius: 4px 4px 4px 4px;
			margin-right: 12rpx;
		}

	}

	.pore {
		position: relative;
		z-index: 1;
	}

	.content {
		padding: 24rpx 0 30rpx;
	}

	.dataBox {
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #E5E5E5;
		margin: -2rpx 0 40rpx 0;
		position: relative;
		z-index: 1;

		.item {
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #E5E5E5;

			image {
				width: 34rpx;
				height: 24rpx;
				margin-right: 16rpx;
			}

			.text {
				font-size: 24rpx;
				color: #28314C;

				.price {
					
					font-weight: 700;
					font-size: 32rpx;
					color: #28314C;
					margin-right: 24rpx;
				}
			}

			.btn {
				width: 158rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 30rpx;
				border: 2rpx solid #2393FF;
				font-size: 24rpx;
				color: #2393FF;
			}
		}
	}

	.topMoney {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: center;
		padding-top: 16rpx;

		.money {
			width: 33%;
			// height: 60rpx;
			
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			overflow: hidden;
			/* 隐藏溢出的内容 */
			white-space: nowrap;
			/* 防止文本换行 */
			text-overflow: ellipsis;
			/* 用省略号表示被隐藏的文本 */
		}

		.moneyTitle {
			width: 33%;
			// height: 60rpx;
			font-size: 24rpx;
			color: #28314C;
			margin-top: 10rpx;
		}
	}

	.btnA {
		width: 307rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: #D7EEFF;
		box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #2393FF;
	}

	.btnB {
		width: 307rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: #0077FF;
		box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.promote {
		margin: 0 32rpx;
		padding: 32rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
		border-radius: 12rpx;

		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			font-family: "Alibaba PuHuiTi 2.0-85 Bold"
		}

		.lineText {
			width: 8rpx;
			height: 34rpx;
			background: #2393FF;
			border-radius: 4px 4px 4px 4px;
			margin-right: 12rpx;
		}

		.sort {
			font-size: 24rpx;
			color: #637697;
			padding: 0rpx 0 8rpx 0;
			border-bottom: 2rpx solid #E5E5E5;

			image {
				width: 23rpx;
				height: 21rpx;
				margin-left: 10rpx;
			}
		}

		.item {
			position: relative;
			margin-top: 24rpx;
			padding: 24rpx 30rpx 24rpx 24rpx;
			background: linear-gradient(180deg, #CCE3FD 0%, #F4F9FF 16%, #FFFFFF 100%);
			box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
			border-radius: 12rpx;

			.time {
				position: absolute;
				top: 0;
				left: 0;
				background: #0077FF;
				border-radius: 12rpx 0px 16rpx 0px;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 8rpx 40rpx 8rpx 24rpx;
			}

			.bottom {
				padding-top: 20rpx;

				.bItem {
					font-size: 24rpx;
					color: #637697;

					.num {
						
						font-weight: 700;
						font-size: 40rpx;
						color: #2393FF;

						.pIcon {
							font-size: 24rpx;
						}
					}

				}

				.btn {
					width: 178rpx;
					height: 62rpx;
					line-height: 62rpx;
					background: #0077FF;
					border-radius: 42rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.contain {
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 100%;

			.imgBox {
				width: 92rpx;
				height: 92rpx;
				background: #E7F5FC;
				border-radius: 14rpx;
				margin-right: 12rpx;

				.imgBox2 {
					width: 76rpx;
					height: 76rpx;
					background: #FFFFFF;
					box-shadow: 0px 6px 12px 0px rgba(12, 64, 103, 0.2);
					border-radius: 14rpx;
				}
			}

			.text {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				font-size: 28rpx;
				color: #28314C;
				margin-top: -10rpx;
			}

			.phoneIcon {
				width: 18rpx;
				height: 22rpx;
				margin-right: 6rpx;
			}

			.phoneBox {
				margin: 2rpx 0 0 4rpx;
				font-size: 24rpx;
				color: #D2D2D2;
			}

			.vip {
				
				font-weight: 700;
				font-size: 46rpx;
			}

			.mr32 {
				margin-right: 32rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 178rpx;
			height: 50rpx;
			background: #0077FF;
			border-radius: 42rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 14rpx;
			}
		}
	}

	.bName {
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 700;
		font-size: 28rpx;
		color: #28314C;
	}

	.bPhone {
		
		font-weight: 700;
		font-size: 24rpx;
		color: #637697;
	}

	.bTotal {
		font-size: 24rpx;
		color: #637697;

		text {
			font-family: DIN;
			font-weight: 700;
			font-size: 32rpx;
			color: #637697;
		}
	}

	.userAvatar2 {
		width: 92rpx;
		height: 92rpx;
		margin-right: 12rpx;
	}
	.addColor{
		color: #2393FF;
	}
	.desColor{
		color: #FF5953;
	}
</style>